<template>
  <div>
    <!-- 筛选条件 -->
    <div class="filter">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === tab.value }"
        @click="changeTab(tab.value)"
      >
        {{ tab.label }} <span v-if="tab.count !== null">{{ tab.count }}</span>
      </button>
    </div>

    <!-- 通知列表 -->
    <div
      v-for="notification in paginatedNotifications"
      :key="notification.notice_id"
      class="notification-card"
    >
      <div class="notification-header">
        <span
          class="badge"
          :class="notification.notice_type === 1 ? 'badge-unified' : 'badge-division'"
        >
          {{ notification.typeLabel }}
        </span>
        <h2>{{ notification.notice_title }}</h2>
      </div>
      <p style="margin-left:10%" v-html="notification.notice_content"></p>
      <!-- 如果是分班发布，显示分班名称 -->
      <div v-if="notification.notice_type === 2" style="margin-left:10%" class="division-labels">
        <span v-for="division in notification.divisions" :key="division.division_id" class="division-name">
          {{ division.division_name }}
        </span>
      </div>
    </div>

    <!-- 分页组件 -->
    <PagiNation
      :currentPage="currentPage"
      :totalPages="totalPages"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { fetchNotices } from '@/services/api'; // 引入API
import PagiNation from '@/components/PagiNation.vue'; // 引入分页组件

export default {
  name: 'StuNoti',
  components: {
    PagiNation, // 注册分页组件
  },
  props: {
    classId: {
      type: [String, Number],
      required: true,
    },
  },
  setup(props) {
    const currentTab = ref('全部通知');
    const currentPage = ref(1);
    const itemsPerPage = 8;

    const tabs = ref([
      { label: '全部通知', value: '全部通知', count: null },
      { label: '统一发布', value: 1, count: null },
      { label: '分班发布', value: 2, count: null },
    ]);
    const notifications = ref([]);
    const divisionList = ref([]);

    const loadNotices = async () => {
      try {
        const response = await fetchNotices(props.classId);
        if (response.data.status === 1) {
          notifications.value = response.data.data.map((notice) => ({
            ...notice,
            typeLabel: notice.notice_type === 1 ? '统一发布' : '分班发布',
            showActions: false,
          }));

          // 更新每个类型的数量
          tabs.value.forEach((tab) => {
            if (tab.value === '全部通知') {
              tab.count = notifications.value.length;
            } else {
              tab.count = notifications.value.filter(
                (notice) => notice.notice_type === tab.value
              ).length;
            }
          });
        } else {
          console.error('获取通知公告失败，错误信息:', response.data.msg);
        }
      } catch (error) {
        console.error('加载通知公告失败:', error);
      }
    };

    const filteredNotifications = computed(() => {
      if (currentTab.value === '全部通知') {
        return notifications.value;
      } else {
        return notifications.value.filter(
          (notification) => notification.notice_type === currentTab.value
        );
      }
    });

    const paginatedNotifications = computed(() => {
      const start = (currentPage.value - 1) * itemsPerPage;
      const end = start + itemsPerPage;
      return filteredNotifications.value.slice(start, end);
    });

    const totalPages = computed(() => {
      return Math.ceil(filteredNotifications.value.length / itemsPerPage);
    });

    const changeTab = (tabValue) => {
      currentTab.value = tabValue;
      currentPage.value = 1;
    };
    const handlePageChange = (newPage) => {
      currentPage.value = newPage;
    };

    onMounted(() => {
      loadNotices();
    });

    return {
      currentTab,
      tabs,
      currentPage,
      totalPages,
      notifications,
      filteredNotifications,
      paginatedNotifications,
      divisionList,
      changeTab,
      handlePageChange,
    };
  },
};
</script>

<style scoped>
/* 分班选择复选框样式 */
.division-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 10px;
  background-color: #fbfbfb;
  padding: 10px;
  border: 1px solid #ebebeb;
  overflow-y: scroll;
  height: 100px;
  border-radius: 5px;
}

.division-checkbox-label {
  display: flex;
  align-items: center;
  font-size: 16px;
}



.filter {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter button {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.3s, color 0.3s;
}

.filter button.active {
  color: #244382;
  border-bottom: 2px solid #244382;
  font-weight: bold;
}

/* 通知列表样式 */
.notification-card {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s;
  margin-bottom: 15px;
}

.notification-card:hover {
  transform: translateY(-5px);
  background-color:#f0f0f0;
}

.notification-header {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}

.badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 14px;
}

/* 分班发布的 Badge 样式 */
.badge-division {
  background-color: #e0f7f9;
  color: #008c9e;
}

/* 统一发布的 Badge 样式 */
.badge-unified {
  background-color: #cae2f9;
  color: #519bd5;
}

.notification-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  position: absolute;
  right: 0;
  top: 0;
}

.edit-button,
.delete-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #244382;
  font-size: 14px;
  transition: color 0.3s;
}

.edit-button:hover,
.delete-button:hover {
  color: #1e3661;
}

.notification-card h2 {
  margin: 0;
  font-size: 18px;
}

.notification-card p {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

/* 分班标签样式 */
.division-name {
  background-color: #e0f0e0;
  padding: 3px 5px;
  border-radius: 5px;
  margin-right: 5px;
  font-size: 12px;
}
</style>
